<template>
  <div>
    <div class="score-box-list content-box" v-if="scoreList">
      <div class="score-box" v-for="item in scoreList" :key="item.id">
        <div class="content-box-item-title">{{ item["course_title"] }}</div>
        <div class="scores-list no-scrollbar scroll-x">
          <template
            v-for="(value, key, index) of filterScoreItem(item)"
            :key="index"
          >
            <div class="score-item none" v-if="isNaN(parseInt(value)) || parseInt(value) < 0">
              <div class="score"></div>
              <div class="text">{{ key }}</div>
            </div>
            <div class="score-item" v-else-if="value >= 60">
              <div class="score">{{ value }}</div>
              <div class="text">{{ key }}</div>
            </div>
            <div class="score-item flunk" v-else>
              <div class="score">{{ value }}</div>
              <div class="text">{{ key }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="score-box-list content-box" v-else>
      <div class="score-box" v-for="i in 2" :key="i">
        <div class="content-box-item-title">
          <div class="pc-skeleton">
            <Skeleton width="200" pc />
          </div>
          <div class="mobile-skeleton">
            <Skeleton width="500" mobile />
          </div>
        </div>
        <div class="scores-list no-scrollbar" style="overflow: hidden">
          <template v-for="i in 24" :key="i">
            <div class="score-item">
              <div class="score" style="background: none">
                <Skeleton width="100%" height="100%" fill round />
              </div>
              <div class="text" style="margin-top: 2px">
                <div class="pc-skeleton">
                  <Skeleton width="60" pc />
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref } from "vue";
import { postPersonalScoreList } from "../../../api/aviation";

// 获取个人成绩列表数据
const scoreList = ref();
const getScoreListData = async () => {
  let res = await postPersonalScoreList();
  if (res.code == 200) {
    scoreList.value = res.data.data;
  } else {
    scoreList.value = [];
  }
};

const filterScoreItem = computed(() => {
  return (obj: Object) => {
    let {
      course_cn_title,
      course_en_title,
      course_id,
      course_title,
      member_id,
      type,
      id,
      ...newObj
    } = obj;
    return newObj;
  };
});

onBeforeMount(() => {
  getScoreListData();
});
</script>
<style scoped lang="less">
@import url("./common.less");
.score-box-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  .content-box-item-title {
    font-size: 18px;
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 768px) {
  .score-box-list {
    margin-top: 0;
    gap: 82px;
    .content-box-item-title {
      margin-bottom: 82px;
      font-size: 72px;
    }
  }
}
</style>
